<template>
	<div class="container">
		<div class="header horizontal">
			<router-link to='/'>
				<svg width="100" height="120">
					<circle cx="50" cy="70" r="36" fill="green" />
				</svg>
			</router-link>
		</div>
		<div class="panel center">
			<div class="panel-title">
				<h3>登录</h3>
			</div>
			<div class="panel-body">
				<form>
					<input type="text" v-model="form.email" placeholder="Email" spellcheck="false" autocomplete="on" class="col-12">
					<input type="password" v-model="form.password" @keyup.enter="login" placeholder="密码" class="col-12">
					<button type="button" @click.prevent.enter="login" class="btn blue">登录</button>
				</form>
				<p class="font-s horizontal">登陆 即表示您同意并愿意遵守 DelBug<router-link to="/provisions" class="f-blue"> 《用户条款》</router-link></p>
				<router-link to="/register"><button class="btn primary">注册新账号</button></router-link>
			</div>
		</div>
	</div>
</template>

<script>
import { login } from '@/api/user_api';
import app from '../utils';
import { mapActions } from 'vuex';

export default {
	name: 'slogin',
	data() {
		return {
			form: {
				email: '',
				password: ''
			}
		}
	},
	methods: {
		...mapActions([
			'SET_UINFO'
		]),
		login: function() {
			if(!this.form.email || !this.form.password) 
				return app.flash('warning', '请输入正确的帐户名或密码~');
			login(this.form).then(response => {
				let res = response.data;
					if(res.s) {
						app.flash('success', '登陆成功~');
						app.setStorage('Token', res.d.token);
						
						const prevPath = app.getStorage('HISTORY_PATH').data;

						if(prevPath === '/register' || prevPath === '/') {
							this.$router.push({
								path: '/',
							}, () => {});
						}else {
							this.$router.back();
						}
					}else {
						app.flash('error', `${d.m}`);
					}
			})
		}
	}
}
</script>

<style scoped>
	.container {margin-top: 130px;}
	.header {
		border: 0;
		background: inherit;
	}
</style>